<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/public/header/permissionCommon.jspf" %>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>权限编辑</title>
    <style>
        .tool-icon {
            font-size: 16px;
            text-align: center;
        }
        .path-label{
            background-color: #125073c4;
            text-align: center;
            border-radius: 12%;
            font-size: 16px;
            color: snow;
            padding: 1px 4px;
        }

        .type-label{
            text-align: center;
            font-weight: bold;
            padding: 1px 4px;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部和左侧导航-->
    <div id="header"></div>
    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
    <!-- 主体 -->
    <div class="layui-body" style="margin: 1%">
        <div class="layui-row">
         <button id="addRootPermButton" class="layui-btn">新建根权限</button>
        </div>

        <div id="permTable" class="grid">
        </div>
        <script id="view" type="text/html">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>权限名称</th>
                    <th>权限分类</th>
                    <th>权限路径</th>
                    <th>权限code</th>
                    <th>优先级</th>
                    <th style="width:140px;">操作</th>
                </tr>
                </thead>
                <tbody>
                {{# layui.each(d.rows,function(index,r){ }}
                <tr>
                    <td>{{r.name}}</td>
                    <td>{{ TEMPLATE_DECORATOR.type(r.istype)}}</td>
                    <td>{{TEMPLATE_DECORATOR.page(r.page)}}</td>
                    <td>{{r.code?r.code:''}}</td>
                    <td>{{r.zindex || ''}}</td>
                    <td>
                        <%--编辑--%>
                        <a class="layui-btn layui-btn-primary layui-btn-xs tool-icon" data-id="{{r.id}}" data-event="edit">
                            <i class="layui-icon layui-icon-edit"></i>
                        </a>
                        <%--添加--%>
                        <a class="layui-btn layui-btn-xs tool-icon" data-id="{{r.id}}" data-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>
                        </a>
                        <%--删除--%>
                        <a class="layui-btn layui-btn-danger layui-btn-xs tool-icon" data-id="{{r.id}}" data-event="del">
                            <i class="layui-icon layui-icon-close"></i>
                        </a>
                    </td>
                </tr>
                {{# }); }}
                </tbody>
            </table>
        </script>
    </div>

    <!--编辑权限 0-->
    <div id="updatePerm" class="layer_self_wrap" style="width:500px;display:none;">
        <form id="permForm" class="layui-form" lay-filter="permForm"
              style="margin-top: 20px;">
            <div class="layui-form-item layui-hide">
                <div class="layui-input-block">
                    <input type="hidden" class="layui-input" name="type"/>
                    <input type="hidden" class="layui-input" name="id" />
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label layui-elem-quote" name="pid" style="font-weight: bold;"></label>
                <div class="layui-input-inline">
                    <input type="hidden" name="pid" class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-inline">
                    <input name="name" lay-verify="required" autocomplete="off" class="layui-input" type="text"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限分类</label>
                <div class="layui-input-block">
                    <input name="istype" value="0" title="菜单" type="radio"/>
                    <input name="istype" value="1" title="功能组" type="radio"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限路径</label>
                <div class="layui-input-inline">
                    <input name="page" lay-verify="required|path" autocomplete="off" class="layui-input" type="text"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限代码</label>
                <div class="layui-input-inline">
                    <input name="code" lay-verify="required|number" autocomplete="off" class="layui-input" type="text"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">优先级</label>
                <div class="layui-input-inline">
                    <input type="text" name="zindex" lay-verify="required|number" autocomplete="off" class="layui-input" />
                </div>
                <div class="layui-form-mid layui-word-aux">请填写大于0的整数数字</div>
            </div>

            <div class="layui-form-item layui-form-text" style="margin-right: 5%;">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="descpt" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="permSubmit" class="layui-btn layui-hide" lay-submit lay-filter="permSubmit">提交</button>
                    <%--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
                </div>
            </div>
        </form>
    </div>
    

    <!--底部-->
    <div id="footer"></div>


    <script src="${webPath}/js/permission/auth/permList.js"></script>

    <script>
      $("#header").load("${webPath}/publicPages/permission/fragments/header.jsp");
      $("#footer").load("${webPath}/publicPages/permission/fragments/footer.jsp");
    </script>
    <script>
        var PERMISSION_TREE = '${permList}';

    </script>

</div>
</body>
</html>